<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>聊天窗口</title>
    <link rel="stylesheet" href="css/button.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/socket.io.js"></script>
    <script src="js/js.cookie.min.js"></script>
    <script src="js/myAjax.js"></script>
    <script src="js/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="static/layui-v2.5.5/css/layui.css">
    <script src="static/layui-v2.5.5/layui.js"></script>


</head>

<body>
<div class="layui-tab">
    <div class="layui-tab">
        <ul class="layui-tab-title" style="width: 800px; margin:0 auto;-webkit-overflow-scrolling: touch;">
            <li class="layui-this">杨豹</li>
            <li>戴文科</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show" style="border: 1px solid lightgrey;height: 500px;width: 800px;margin:0 auto;-webkit-overflow-scrolling: touch;overflow-y: scroll;">
                1
            </div>
            <div class="layui-tab-item" style="border: 1px solid lightgrey;height: 500px;width: 800px;margin:0 auto;-webkit-overflow-scrolling: touch;overflow-y: scroll;">
                2
            </div>
        </div>
    </div>
</div>

<div class="sub">
    <div><input id="text"></div>
    <a onclick="to()" class="button button-royal button-large">发送</a>
</div>
</div>
<div id="num" style="position: absolute;right: 10px;top: 10px;">

</div>
</body>
<!--<script>-->
<!--    //创建TCP连接-->
<!--    var socket = io('http://10.11.12.84:8008');-->
<!--    // 连接成功后会监听到-->
<!--    socket.on('connect', function () {-->
<!--        // output('<span>连接成功</span>');-->
<!--    });-->


<!--    socket.on('connect_failed', function () {-->
<!--        //output('<span>连接失败！</span>');-->
<!--    });-->
<!--    socket.on('message', function (data) {-->
<!--        console.log(data);-->
<!--        let severName = data.username;-->
<!--        let context = data.msg;-->
<!--        let name = Cookies.get('username');-->
<!--        let style = ``;-->
<!--        if (severName == name) {-->
<!--            let len = getByteLen(context);-->
<!--            let left = 90;-->
<!--            left = left - len;-->
<!--            if (left < 0) {-->
<!--                left = 20;-->
<!--                style += `text-align:left;`;-->
<!--            }-->
<!--            style += `margin-left:${left}%;`-->
<!--            console.log(style);-->
<!--        }-->
<!--        let msg = `<div class="c-item ${severName == name ? 'c-item-right' : 'c-item-left'}">-->
<!--        <ul>-->
<!--            <li>-->
<!--                 <span class="photo">-->
<!--                     <img src="https://ybandtwq.gitee.io/blok-img/yys/head.png" />-->
<!--                </span>-->
<!--            </li>-->
<!--            <li>-->
<!--                <span>${severName}</span>-->
<!--                <span>${data.time}</span>-->
<!--            </li>-->
<!--        </ul>-->
<!--        <br/>-->
<!--        <div class="${severName == name ? 'c-content-right' : 'c-content-left'}" style="${style}">-->
<!--           ${context}-->
<!--        </div>-->
<!--    </div>`;-->
<!--        output(msg);-->
<!--    });-->



<!--    function scrollLast() {-->
<!--        let showContent = document.getElementById("msg");-->
<!--        showContent.scrollTop = showContent.scrollHeight;-->
<!--    }-->

<!--    socket.on('num', function (num) {-->
<!--        console.log(num);-->
<!--        let numDiv = document.getElementById('num');-->
<!--        numDiv.innerText = `当前在线人数:[${num}]`;-->
<!--    });-->

<!--    //想要断开连接调用此方法-->
<!--    function sendDisconnect() {-->
<!--        socket.disconnect();-->
<!--    }-->

<!--    function getByteLen(val) {-->
<!--        var len = 0;-->
<!--        for (var i = 0; i < val.length; i++) {-->
<!--            var a = val.charAt(i);-->
<!--            if (a.match(/[^\x00-\xff]/ig) != null) {//\x00-\xff→GBK双字节编码范围-->
<!--                len += 2;-->
<!--            }-->
<!--            else {-->
<!--                len += 1;-->
<!--            }-->
<!--        }-->
<!--        return len;-->
<!--    }-->


<!--    //下面的testMessage是自定义的。-->
<!--    //这里是监听服务端返回的testMessage事件-->

<!--    function to() {-->
<!--        let name = Cookies.get('username');-->
<!--        if (!name) {-->
<!--            name = prompt("请输入一个用户名");-->
<!--            if (!name || name.trim() === '') {-->
<!--                to();-->
<!--            }-->
<!--        }-->
<!--        name = name.trim();-->
<!--        Cookies.set('username', name);-->
<!--        let text = document.getElementById('text');-->
<!--        if (!text.value || text.value.trim() === '') {-->
<!--            return;-->
<!--        }-->
<!--        socket.emit('message', {-->
<!--            username: name,-->
<!--            msg: text.value-->
<!--        });-->
<!--        text.value = '';-->
<!--    }-->

<!--    function output(str) {-->
<!--        let msg = document.getElementById('msg');-->
<!--        msg.innerHTML += str;-->

<!--        window.localStorage.setItem('msg', msg.innerHTML.trim());-->
<!--        scrollLast();-->
<!--    }-->

<!--    scrollLast();-->

<!--    function init() {-->
<!--        let msg = window.localStorage.getItem('msg');-->
<!--        let len = getByteLen(msg);-->
<!--        if (len > 1024 * 1024 * 2) {-->
<!--            window.localStorage.setItem('msg', '');-->
<!--        }-->
<!--        if (msg) {-->
<!--            output(msg);-->
<!--        }-->
<!--    }-->

<!--    document.onkeydown = function (e) {-->
<!--        if (e.keyCode == 13) {-->
<!--            to();-->
<!--        }-->
<!--    }-->
<!--    init();-->
<!--</script>-->

<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            let name = Cookies.get('username');
            if (!name) {
                name = prompt("请输入一个用户名");
                if (!name || name.trim() === '') {
                    openSocket();
                }
            }
            name = name.trim();
            let data = getAjax('/login',"name="+name+"");
            if (data === 1){
                console.log(data)
                Cookies.set('username', name);
            }else {
                openSocket();
            }

            var socketUrl="http://localhost:8080/imserver/"+name;

            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl);
            if(socket!=null){
                socket.close();
                socket=null;
            }
            socket = new WebSocket(socketUrl);
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            console.log('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
            socket.send('{"toUserId":"'+$("#toUserId").val()+'","contentText":"'+$("#contentText").val()+'"}');
        }

        //打开事件
        socket.onopen = function() {
            console.log("websocket已打开");
            //socket.send("这是来自客户端的消息" + location.href + new Date());
        };
        //获得消息事件
        socket.onmessage = function(msg) {
            console.log(msg.data);
            //发现消息进入    开始处理前端触发逻辑
        };
        //关闭事件
        socket.onclose = function() {
            console.log("websocket已关闭");
        };
        //发生了错误事件
        socket.onerror = function() {
            console.log("websocket发生了错误");
        }

    }
    init();
    function init() {
        openSocket();
    }
</script>
<script>
    layui.use('element', function(){
        var $ = layui.jquery
            ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function(){
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项'+ (Math.random()*1000|0) //用于演示
                    ,content: '内容'+ (Math.random()*1000|0)
                    ,id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            }
            ,tabDelete: function(othis){
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            }
            ,tabChange: function(){
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function(elem){
            location.hash = 'test='+ $(this).attr('lay-id');
        });

    });
</script>

</html>
